import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import icona from '@/assets/icons/icona.png'
import iconc from '@/assets/icons/iconc.png'
import { Row, Col, Card, Icon, Tooltip, Form, Divider, Drawer, Button, Radio, Modal, Input, Table, Tag, Transfer, Pagination, message, Progress, Spin } from 'antd';
import { spawn } from 'child_process';
import styles from "./index.less";
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Search = Input.Search;


class Automatic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      percent: 0,
      login: true,
      intellectualId: '',
      ifElse: 9,
      questions: [],
      list: [],
      selectedRowKeys: [],
      questionList:[]
    }
  }

  componentDidMount() {
    console.log(this.props)
    if (this.props.intellectualId) {
      this.setState({ intellectualId: this.props.intellectualId })
    }
    if (this.props.questions) {
      this.setState({ questions: this.props.questions })
    }
    this.baseQaRecommendStatus()
  }

  baseQaRecommendStatus = () => { // 获取知识点问题推荐任务状态
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'extendRt/baseQaRecommendStatus',
        payload: { id: this.state.intellectualId },
        callback: res => {
          console.log(res)
          switch (res.status) {  // none：未提交过任务， wait：正在执行中, success：执行成功 error：无返回结果
            case 'none':
              this.setState({ ifElse: 2 })
              break;
            case 'wait':
              this.setState({ ifElse: 3 })
              break;
            case 'success':
              this.setState({ }, () => { this.qaRecommendList() })
              break;
            case 'error':
              this.setState({ ifElse: 1 })
              break;
          }
          this.setState({
            login: false
          })
        },
      });
    });
  }

  qaRecommendSubmit = () => { // 提交知识点问题推荐任务
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'extendRt/qaRecommendSubmit',
        payload: { id: this.state.intellectualId, questions: this.state.questions },
        callback: res => {
          console.log(res)
          if (res.code === 0) {
            this.setState({percent:0},()=>{
              this.baseQaRecommendProcess()
            })
          }
        },
      });
    });
  }

  qaRecommendList = () => { // 列表
    // this.setState({ login: true})
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'extendRt/qaRecommendList',
        payload: { id: this.state.intellectualId },
        callback: res => {
          console.log(res)
         
          if (res.code === 0) {
            this.setState({ list: res.data }, () => {
              console.log(this.state.list)
              if (res.data.length==0) {
                console.log('1')
                this.setState({ ifElse:1,login:false })
              }else{
                console.log('2')
                this.setState({login:false, ifElse: 4})
              }
            })
          }
          
        },
      });
    });
  }

  addPoint = () => {
    const {questionList} = this.state
    if(questionList.length){
      this.props.addPoint(questionList)
    }
  }

  baseQaRecommendProcess = () => { // 进度条
    const { dispatch, currentUser } = this.props;
    this.setState({ ifElse: 3 })
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'extendRt/baseQaRecommendProcess',
        payload: { id: this.state.intellectualId },
        callback: res => {
          console.log(res)
          if (res.process === 1) {
            this.setState({ percent: 100 }, () => {
              this.qaRecommendList()
              setTimeout(() => {
                // this.setState({ ifElse: 4 })
              }, 1000);
            })
          } else if (res.process === 0) {
            this.setState({ percent: 0 }, () => {
              setTimeout(() => {
                this.baseQaRecommendProcess()
              }, 1000);
            })
          } else {
            const number = res.process
            console.log(Math.floor(Number(number * 100)))
            this.setState({ percent: Math.floor(Number(number * 100)) }, () => {
              setTimeout(() => {
                this.baseQaRecommendProcess()
              }, 1000);

            })
          }
        },
      });
    });
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        let a = []
        selectedRows.map((item, index) => {
          a.push(item.question)
        })
        console.log(a)
        this.setState({ selectedRowKeys,questionList:a })
      },
    };
    const columns = [
      {
        title: '推荐相似问',
        fixed: 'left',
        width: 'calc(97vw)',
        dataIndex: 'question',
        render:(question)=>{
        return ( <span dangerouslySetInnerHTML={{ __html: question }}></span>)
        }
      },
      {
        title: '',
        fixed: 'right',
        width: 'calc(3vw)',
      }]

    return (
      <Spin spinning={this.state.login}>
        <div className={styles.flexBJ}>
          {this.state.ifElse === 1 ? <div className={styles.flexXBJ}>
            <img src={iconc} />
            <p>抱歉，没有找到合适的推荐问题</p>
            <p style={{ fontWeight: 600 }}>您可以在"智能学习>知识库智能维护>问题库"中多导入一些相关问题后再进行推荐</p>
            <div style={{ height: 60 }}></div>
            <span onClick={this.qaRecommendSubmit} className={styles.buttonDj}>重新推荐</span>
          </div> : null}
          {this.state.ifElse === 2 ? <div className={styles.flexXBJ}>
            <img src={icona} />
            <p style={{ fontWeight: 600 }}>将"智能学习>知识库智能维护>问题库"中意思相近的问题推荐给该知识点</p>
            <div style={{ height: 60 }}></div>
            <span onClick={this.qaRecommendSubmit} className={styles.buttonDj}>开始推荐</span>
          </div> : null}

          {this.state.ifElse === 3 ? <div className={styles.flexXBJ}>
            <div style={{ height: 20 }}></div>
            <Progress
              type="circle"
              percent={this.state.percent}
              width={90}
              strokeWidth={8}
            />
            <div style={{ height: 20 }}></div>
           <div  style={{width:230}}><span>问题推荐中</span><span className={styles.loading}></span></div>
          </div> : null}
          { 
            this.state.ifElse === 4 ? <div style={{minHeight:'calc(70vh)'}}>
              <Table
              
                rowSelection={rowSelection}
                onChange={this.pXhandleChange}
                style={{ padding: '20px 0px 0px 0px' }}
                columns={columns}
                dataSource={this.state.list}// 数据
                scroll={{ y:'calc(70vh)' }}
                pagination={false}
              />
              <div style={{height:20}}></div>
              <div className='zdyButtonA'>
                <Button onClick={this.addPoint} type='primary' style={{marginRight:10}}>添加到知识点</Button>
                <Button onClick={this.qaRecommendSubmit}>重新推荐</Button>
              </div>
            </div> : null
          }

        </div>
      </Spin>
    );
  }




}
export default connect(({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(Automatic));

